<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/11/2
  Time: 21:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="${pageContext.request.contextPath}/assets/images/favicon.png" type="image/png">
    <title>分配资源</title>

    <!--Begin  Page Level  CSS -->
    <link href="${pageContext.request.contextPath}/assets/plugins/morris-chart/morris.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet"/>
    <!--End  Page Level  CSS -->
    <link href="${pageContext.request.contextPath}/assets/css/icons.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/style.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/responsive.css" rel="stylesheet">
    <style>
        .wrapper {
            background-color: white;
        }

        .menu1 input:focus, .menu2 input:focus {
            border-color: rgb(107, 170, 255);

        }

        .menu1 input:hover, .menu2 input:hover {
            cursor: pointer;
        }

        .menu1 label:hover, .menu2 label:hover {
            cursor: pointer;
        }

        .menu1 input, .menu2 input {
            outline: 1px solid rgba(233, 255, 255, 0.51);
        }

        .menu2, .menu1 {
            font-size: 15px;
            color: rgb(96, 98, 102);
        }
        .menu1>span{
            display: none;
            width: 13px;
            height: 13px;
            position: absolute;
            line-height: 13px;
            text-align: center;
            background-color: rgb(0,117,255);
            margin-left: -92px;
            margin-top: 4px;
            border-radius: 2px;
            outline: 1px solid rgba(233, 255, 255, 0.51);
        }
        .menu1>span>.fa {
            color: white;
            display: inline-block;
            font: normal normal normal 10px/1 FontAwesome;
             font-size: 4px;
             text-rendering: auto;
             -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;

        }
        #menu > .menu1 {
            background-color: rgb(242, 246, 252);
            border: 1px solid rgb(220, 223, 230);
            padding-left: 2em;
            padding-top: 10px;
            padding-bottom: 10px;
        }

        #menu > .menu2 {
            border-left: 1px solid rgb(220, 223, 230);
            border-right: 1px solid rgb(220, 223, 230);
            padding-left: 2em;
            padding-top: 20px;
            padding-bottom: 20px;
        }

        .myhandle {
            margin-top: 40px;
            text-align: -webkit-center;
            display: block;
        }
    </style>
</head>
<body class="sticky-header">
<jsp:include page="../inc/left.jsp"/>
<div class="main-content">
    <jsp:include page="../inc/header.jsp"/>
    <!--body wrapper start-->
    <div class="wrapper">
        <!--Start Page Title-->
        <div class="page-title-box">
            <ol class="breadcrumb " style="float:left;">
                <li>
                    <a href="${pageContext.request.contextPath}/index">首页</a>
                </li>
                <li>
                    <a href="${pageContext.request.contextPath}/permissions/admin">权限</a>
                </li>
                <li class="active">
                    分配资源
                </li>
            </ol>
            <div class="clearfix"></div>
        </div>
        <div class="container"
             style="border: 1px solid #ebeef5;border-radius: 4px;
                    background-color: #fff;width: 800px;
                    color: #303133;
                    transition: .3s;padding: 35px 35px 15px;
                    margin: 20px auto;">
            <c:forEach items="${resourceCategories}" var="m1">
                <div id="menu">
                    <div class="menu1" tabindex="-1">
                        <input id="${"menu1".concat(m1.id)}" type="checkbox" value="${m1.id}" tabindex="-1">
                        <label for="${"menu1".concat(m1.id)}">&emsp;${m1.name}</label>
                        <span>
                           <i class="fa fa-minus"></i>
                        </span>
                    </div>
                    <div class="menu2" tabindex="-1">
                        <c:forEach items="${resourceList}" var="m2">
                            <c:if test="${m2.categoryId eq m1.id}">
                               <span style="width: 25%;margin-right: 5%;display: inline-block">
                                   <input id="${"menu2".concat(m2.id)}" type="checkbox"
                                       ${roleResourceList.indexOf(Integer(m2.id))!=-1?"checked":""} value="${m2.id}"
                                          tabindex="-1">
                                   <label for="${"menu2".concat(m2.id)}">&emsp;${m2.name}</label>
                               </span>
                            </c:if>
                        </c:forEach>
                    </div>
                </div>
            </c:forEach>
            <div class="myhandle">
                <button class="btn btn-primary" type="button" id="sub">保存</button>
                <button class="btn btn-default" type="button" id="clear">清空</button>
                <a class="btn btn-default" href="${pageContext.request.contextPath}/permissions/role">返回</a>
            </div>
        </div>
    </div>
</div>

<!--Begin core plugin -->
<script src="${pageContext.request.contextPath}/assets/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/plugins/moment/moment.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/jquery.slimscroll.js "></script>
<script src="${pageContext.request.contextPath}/assets/js/jquery.nicescroll.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/functions.js"></script>
<!-- End core plugin -->

<!--Begin Page Level Plugin-->
<script src="${pageContext.request.contextPath}/assets/plugins/morris-chart/morris.js"></script>
<script src="${pageContext.request.contextPath}/assets/plugins/morris-chart/raphael-min.js"></script>
<script src="${pageContext.request.contextPath}/assets/plugins/jquery-sparkline/jquery.charts-sparkline.js"></script>
<script src="${pageContext.request.contextPath}/assets/pages/dashboard.js"></script>
<!--End Page Level Plugin-->

<script>

    function updateColor() {
        $("input").each(function (i, j) {
            if ($(j)[0].checked == true) {
                $(j).next().css("color", 'rgb(107,170,255)');
            } else {
                $(j).next().css("color", 'rgb(96,98,102)');
            }
        })
    }

    function init() {
        let obj = $(".menu2");
        for (let i = 0; i < obj.length; i++) {
            let count=0;
            let ds=obj[i].children;
            for (let i = 0; i < ds.length; i++) {
                let children = ds[i].children;
                if(children[0].checked==true){
                    if(count==ds.length-1){
                        $(ds[i].parentNode).prev().children()[0].checked=true;
                        $($(ds[i].parentNode).prev().children()[2]).css("display","none");
                        break
                    }
                    $($(ds[i].parentNode).prev().children()[2]).css("display","inline-block");
                    count++;
                }
            }
        }
    }

    init();

    $(".menu1 input").bind("click", function (obj) {
        let it = $(obj.currentTarget)[0].checked;
        let ds = $(obj.currentTarget)[0].parentNode.nextElementSibling.children;

        if (it === true) {
            $($(obj.currentTarget)[0]).next().next().css("display","none");
            for (let i = 0; i < ds.length; i++) {
                ds[i].children[0].checked = true;
            }
        } else {
            for (let i = 0; i < ds.length; i++) {
                ds[i].children[0].checked = false;
            }
        }
    })
    $(".menu2 input").bind("click", function (obj) {
        let ds = obj.currentTarget.parentNode.parentNode.children;
        count=0;
        count1=0;
        for (let i = 0; i < ds.length; i++) {
            if (ds[i].children[0].checked == true) {
                if(count==ds.length-1){
                    $(ds)[0].parentNode.parentNode.children[0].children[0].checked = true;
                    $($(ds)[0].parentNode.parentNode.children[0].children[2]).css("display","none");
                    return
                }
                $($(ds)[0].parentNode.parentNode.children[0].children[2]).css("display","inline-block");
                $(ds)[0].parentNode.parentNode.children[0].children[0].checked = false;
                count++;
            }else {
                if(count==0){
                    $($(ds)[0].parentNode.parentNode.children[0].children[2]).css("display","none");
                }
            }

        }


    })

    $("#sub").bind("click", function () {
        let ips = $(".menu2 input")
        let ids = []
        for (let i = 0; i < ips.length; i++) {
            if (ips[i].checked === true) {
                ids.push($(ips[i]).val())
            }
        }
        $.ajax({
            url: "${pageContext.request.contextPath}/permissions/saveAllocResource",
            type: "post",
            data: {
                "ids": JSON.stringify({ids}),
                "roleId":${roleId},
            },
            success: function () {
                location.href="${pageContext.request.contextPath}/permissions/role";
            }
        })
    })

    $("#clear").bind("click", function () {
        let ips = $(".menu2 input,.menu1 input");
        for (let i = 0; i < ips.length; i++) {
            ips[i].checked = false;
        }
         $(".menu1 span").each(function (i,j) {
            $(j).css("display","none");
        })
    })
    // init();
    updateColor();
    $("body").click(function () {
        updateColor();
    })

</script>

</body>
</html>
